import { lazy } from "react";
import { createBrowserRouter, Navigate } from "react-router-dom";
import MainLayout from "../pages/layout/MainLayout";
import {
  AppOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'

const Login = lazy(() => import('../pages/login'))
const Home = lazy(() => import('../pages/home'))
const Query = lazy(() => import('../pages/query'))
const Ticket = lazy(() => import('../pages/ticket'))
const OrderList = lazy(() => import('../pages/order_list'))
const OrderConfirmation = lazy(() => import('../pages/order_confirmation'))
const Person = lazy(() => import('../pages/person'))



export const childrenRoutes = [
    {path:'/layout/home', element: <Home />,title: "首页", icon: <AppOutline />, },
    {path:'/layout/order', element: <div >订单</div>, title: "订单",  icon: <UnorderedListOutline />,},
    {path:'/layout/user', element: <div >我的</div>, title: "我的", icon: <UserOutline />},
]

const routers = createBrowserRouter([
    {path:"/login", element: <Login />},
    {path:"/query", element: <Query />},
    {path:"/ticket", element: <Ticket />},
    {path:"/order_list", element: <OrderList />},
    {path:"/person", element: <Person />},
    {path:"/order_confirmation", element: <OrderConfirmation />},
    {path:"/404", element: <div>404</div>},
    {path:"/layout", element: <MainLayout />, children: childrenRoutes},
    {path:'*', element:<div>404</div>},
    {path:'/', element:<Navigate to="/layout/home" />} 
])

export default routers